<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
      @multi-actions="handleActions"
    >

      <template #filter-content>
        <el-tooltip :disabled="siteData.props.faceAudit==='auto'" content="需要开启自动审核才可用：系统设置 > 系统配置 > 功能配置：人脸审核" placement="top">
          <span class="filter-item">
            <el-button :disabled="siteData.props.faceAudit!=='auto'" type="primary" size="small" class="filter-item" @click="autoAudit">全部自动审核</el-button>
          </span>
        </el-tooltip>
        <dic-list-select v-model="listQuery.params.state" dic-code="real_person_state" title="审核状态"/>
        <el-input v-model="listQuery.params.realName" style="width: 200px" placeholder="姓名" class="filter-item" size="small" />
        <el-input v-model="listQuery.params.idCard" style="width: 200px" placeholder="身份证号码" class="filter-item" size="small" />
      </template>

      <template #data-columns>

        <el-table-column
          type="selection"
          width="55"
        />

        <el-table-column
          label="账号"
          prop="id_dictText"
          show-overflow-tooltip
        />

        <el-table-column
          label="姓名"
          prop="realName"
          show-overflow-tooltip
        />

        <el-table-column
          label="身份证号"
          prop="idCard"
          show-overflow-tooltip
        />

        <el-table-column
          show-overflow-tooltip
          align="center"
          label="人脸照片">

          <template v-slot="scope">
            <div style="cursor: pointer" @click="showImage(scope.row.face)">
              <el-image :src="scope.row.face" style="height: 60px" />
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="提交时间"
          align="center"
          prop="createTime"
        />

        <el-table-column
          align="center"
          prop="state_dictText"
          label="审核状态"/>

        <el-table-column
          align="center"
          prop="auditBy_dictText"
          label="审核人"/>

        <el-table-column
          align="center"
          prop="auditTime"
          label="审核时间"/>

        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="auditMsg"
          label="审核消息"/>

      </template>
    </data-table>

    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      title="实名审核"
      width="500px"
      @close="dialogVisible = false"
    >

      <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="100px">

        <el-form-item label="审核意见" prop="state">
          <el-radio-group v-model="postForm.state">
            <el-radio :label="1">审核通过</el-radio>
            <el-radio :label="2">退回修改</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="审核理由" prop="reason">
          <el-input v-model="postForm.reason" type="textarea"/>
        </el-form-item>

        <el-alert v-if="postForm.state===2" type="warning" title="已审核通过的记录无法退回，将会自动忽略！"/>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="handAudit">确 定</el-button>
      </div>

    </el-dialog>

    <el-dialog
      :visible.sync="imageVisible"
      title="人脸照片"
      width="30%">
      <div style="display: flex; align-items: center; justify-content: center">
        <el-image :src="imageUrl"/>
      </div>

    </el-dialog>

  </div>

</template>

<script>
import { audit, auto } from '@/api/sys/user/real'
import { mapGetters } from 'vuex'
export default {

  data() {
    return {
      listQuery: {
        current: 1,
        size: 10,
        params: {
          state: ''
        }
      },

      options: {

        delete: {
          enable: true,
          permission: 'sys:real:delete',
          url: '/api/sys/user/real/delete'
        },

        // 列表请求URL
        listUrl: '/api/sys/user/real/paging',
        // 批量操作列表
        multiActions: [
          {
            value: 'audit',
            label: '人工审核',
            permission: 'sys:real:audit'
          },
          {
            value: 'auto',
            enable: false,
            label: '自动审核',
            permission: 'sys:real:audit'
          }
        ]
      },

      loading: false,
      dialogVisible: false,
      postForm: {

      },
      rules: {
        state: [
          { required: true, message: '审核意见不能为空！' }
        ],
        reason: [
          { required: true, message: '审核理由不能为空！' }
        ]
      },

      imageVisible: false,
      imageUrl: ''
    }
  },
  computed: {
    ...mapGetters([
      'siteData'
    ])
  },

  watch: {
    'postForm.state': {
      handler(val) {
        if (val === 1) {
          this.rules.reason = []
        } else {
          this.rules.reason = [{ required: true, message: '审核理由不能为空！' }]
        }
      }
    },
    siteData: {
      handler(val) {
        if (val.props.faceAudit === 'auto') {
          this.options.multiActions[1].enable = true
        }
      }
    }
  },

  created() {
    if (this.siteData.props.faceAudit === 'auto') {
      this.options.multiActions[1].enable = true
    }
  },

  methods: {

    // 提交审核
    handAudit() {
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }

        this.loading = true
        audit(this.postForm).then(() => {
          this.$message.success('审核操作成功！')
          this.loading = false
          this.dialogVisible = false
          this.$refs.pagingTable.getList()
        }).catch(() => {
          this.loading = false
        })
      })
    },

    // 批量操作
    handleActions(event) {
      if (event.opt === 'audit') {
        this.dialogVisible = true
        this.postForm = { ids: event.ids }
      }
      if (event.opt === 'auto') {
        this.postForm = { ids: event.ids }

        this.$confirm('将自动调用服务商对选定记录的姓名、身份证号、人脸头像进行自动审核，审核会产生相应的费用，确认要继续操作吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          auto(this.postForm).then(() => {
            this.$message.success('审核任务已提交！')
            this.$refs.pagingTable.getList()
          })
        })
      }
    },

    showImage(url) {
      this.imageUrl = url
      this.imageVisible = true
    },

    autoAudit() {
      this.$confirm('将自动调用服务商对所有待审核记录的用户姓名、身份证号、人脸头像进行自动审核，审核会产生相应的费用，确认要继续操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        auto({ ids: [] }).then(() => {
          this.$message.success('审核任务已提交！')
          this.$refs.pagingTable.getList()
        })
      })
    }
  }
}
</script>
